<template>
  <div class="pho-form-item" :style="newStyle">
          <!-- style="padding-bottom: 0" -->

    <van-field
      v-model="formValue"
      :name="$attrs.__vModel__"
      :rules="$attrs.rules"
      :required="$attrs.required"
      :disabled="$attrs.disabled"
    >
      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
      <template slot="input">
        <i
          v-if="$attrs.prefixIcon"
          :class="$attrs.prefixIcon"
          style="color: #969799; margin-right: 8px"
        />
        <TextShow style="padding-left:0;padding-right:0" :value="value" v-if="$attrs.onlyShow" />
        <van-popover
          v-else
          v-model="showPopover"
          :actions="actions"
          get-container="body"
          trigger="click"
          :style="{width:'100%','--fieldWidth':fieldWidth}"
          @select="onSelect"
        >
          <template #reference>
            <div ref="Field">
              <van-field
                v-model="formValue"
                style="padding: 0"
                :type="showPassword ? 'password' : type"
                :placeholder="$attrs.placeholder"
                :clearable="$attrs.clearable"
                :maxlength="$attrs.maxlength"
                :readonly="$attrs.readonly"
                :disabled="$attrs.disabled"
                @input="onInput"
                @blur="onBlur"
                @focus="onFocus"
                @change="onChange"
                @clear="onClear"
              />
            </div>
          </template>
        </van-popover>
      </template>
      <template slot="right-icon" v-if="$attrs.suffixIcon">
        <i :class="$attrs.suffixIcon" />
      </template>
    </van-field>

    <div
      v-if="!$attrs.onlyShow"
      :class="$attrs.disabled ? 'pho-disabled' : ''"
      class="van-field__word-limit"
      style="padding: 0 16px 10px; margin: 0"
    >
      <template v-if="$attrs.showWordLimit">
        <span class="van-field__word-num" style="margin-top: 4px">
          {{
          formValue.length
          }}
        </span>
        /{{ $attrs.maxlength }}
      </template>
    </div>
  </div>
</template>

<script>
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "phone-form-autocomplete",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    value: {
      type: String,
      default: "",
    },

    // type: text-文本 textarea-文本域 password-密码框
    type: {
      type: String,
      default: "text",
    },
    // 是否为密码输入框
    showPassword: {
      type: Boolean,
      default: false,
    },
    // 是否展示标题
    showLabel: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showPopover: false,
    };
  },
  computed: {
    formValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("update", val);
      },
    },
    fieldWidth() {
      const width = this.$refs.Field.offsetWidth;
      return width + "px";
    },
    actions() {
      const actions = this.querySearch(this.value);
      return actions.map((item) => {
        return {
          text: item[this.dataObj.props.value],
          className: "pho-autocomplete-item",
        };
      });
    },
  },
  methods: {
    onSelect(action) {
      this.$emit("update", action.text);
    },
    querySearch(queryString) {
      const results = queryString
        ? this.resData.filter(this.createFilter(queryString))
        : this.resData;
      // 调用 callback 返回建议列表的数据
      return results;
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant[this.dataObj.props.value]
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
  },
};
</script>

<style lang="scss" >
.pho-autocomplete-item {
  // width: 100%;
  white-space: nowrap; //禁止换行
  // width: var(--fieldWidth);
}
</style>
